<template>
  <div class="main">
    <el-row type="flex" justify="center">
      <el-col :span="10">
        <el-form
          ref="registerForm"
          :model="user"
          :rules="rules"
          label-width="80px"
          status-icon
        >
          <el-form-item label="用户" size="mini" prop="uname">
            <el-input
              v-model="user.uname"
              size="mini"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" size="mini" prop="upwd">
            <el-input
              type="password"
              v-model="user.upwd"
              size="mini"
              prefix-icon="el-icon-view"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" size="mini" prop="rupwd">
            <el-input
              type="password"
              v-model="user.rupwd"
              size="mini"
              prefix-icon="el-icon-view"
            ></el-input>
          </el-form-item>
          <el-form-item size="mini">
            <el-button type="primary" size="mini" @click="submitForm()"
              >注册</el-button
            >
            <el-button size="mini" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "UserRegister",
  data() {
    return {
      user: {
        uname: "",
        upwd: "",
        rupwd: "",
      },
      rules: {
        uname: [
          {
            type: "string",
            required: true,
            trigger: "blur",
            message: "请输入用户",
          },
          {
            type: "string",
            validator: (_, val, callback) => {
              this.$axios({
                url: "/api/nameRepeat",
                params: {
                  uname: this.user.uname,
                },
              }).then((rs) => {
                if (rs.data.data) {
                  callback(new Error("用户名重复"));
                } else {
                  callback();
                }
              });
            },
            trigger: "blur",
          },
        ],
        upwd: [
          {
            type: "string",
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            type: "string",
            pattern: "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$",
            message: "密码必须为数字和英文字母，长度6-20",
            trigger: "blur",
          },
        ],
        rupwd: [
          {
            type: "string",
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
          {
            validator: (rules, val, callback) => {
              if (val !== this.user.upwd) {
                callback(new Error("二次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.registerForm.validate((flag) => {
        if (flag) {
          this.$axios({
            method:'post',
            url:'/api/addUser',
            data:{
                uname:this.user.uname,
                upwd:this.user.upwd
            }
          }).then(rs=>{
            if(rs.data.data){
                this.$message.success('用户添加成功！')
                this.$router.replace({name:'index-main'},()=>{})
            }else{
                this.$message.error('用户添加失败！')
            }
          })
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.registerForm.resetFields();
    },
  },
};
</script>

<style>
</style>